<template>
    <div class="goodslist-02">
        <div class="top-header border-bottom ">
            <div class="top-back">
                <a @click="close">返回</a>
            </div>
            <h2 class="f36">
                王者荣耀代练
            </h2>
        </div>
        <div class="mbpub-main">
            <div class="mbpub-heroic bg-fff  pb-200">
                <div class="heroic-titl px-30">
                    <a v-for="(item,index) in itemAttribute" @click="choseAttribute(item,index)" class="f32 color-000 fl" :class="{'active':isChose==index}">{{item.name}}</a>
                </div>
                <div class="heroic-conn pl-30">
                    <div class="herlist fl" v-for="(item,index) in heroList" @click="chooseHero(item,index)">
                        <div class="pic" :class="{active:item.isTrue==true}"><img :src="item.img"><i></i>
                        </div>
                        <p class="f22 color-666 text-center">{{item.name}}</p>
                    </div>
                </div>

                <div class="mbpub-btn bg-fff p-30 fixed-bottom">
                    <a class="btn color-fff text-center bg-f54 f36" @click="close">确定</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import config from './config'
    export default {
        name: '',
        data () {
            return {
                isChose:0,
                itemAttribute:[
                  {
                    id:0,name:'坦克'
                  },
                  {
                    id:1,name:'战士'
                  },
                  {
                    id:2,name:'刺客'
                  },
                  {
                    id:3,name:'法师'
                  },
                  {
                    id:4,name:'射手'
                  },
                  {
                    id:5,name:'辅助'
                  },
                ],
                heroList: [],
                chooseId: [],
            }
        },
        props: ['heroId'],
        watch: {},
        mounted(){
            this.choseAttribute(this.itemAttribute[0],0)
//            if (this.heroId) {
//                this.heroList.forEach(item => {
//                    this.heroId.forEach(cId => {
//                        if (item.id == cId) {
//                            this.$set(item, 'isTrue', true);
//                        }
//                    })
//                })
//            }
        },
        methods: {
          choseAttribute(item,index){

            this.isChose = index;

            this.heroList = config.heroList.filter((list)=>{
              return list.attribute.indexOf(item.name)>=0
            })
          },
            close(){
                this.$parent.chooseHero = false;
              config.heroList.forEach(item => {
                    if (item.isTrue)
                        this.chooseId.push(item);
                })
                this.$emit('heroList', this.chooseId);
            },
            chooseHero(item, index){
                item.isTrue ? this.$set(item, 'isTrue', false) : this.$set(item, 'isTrue', true);
                console.log(this.heroList)
            }
        }
    }
</script>

<style src="css/dlAll/dl-cxy.css"></style>
<style scoped>

</style>
